import React             from 'react';
import PageTitle         from 'component/page-title/index.jsx';
import Order             from 'service/order-service.jsx';
import MUtil             from 'util/mm.jsx';
import TableList    from 'util/table-list/index.jsx';
import './detail.scss'
const _order = new Order();
const _mm   = new MUtil();

class orderDetail extends React.Component{
     constructor(props){
     	super(props);
     	this.state = {
            orderNumber : this.props.match.params.orderNumber,
            orderInfo   : {}
     	}
     }
     componentDidMount(){
        this.loadOrderDetail();
     }
     //加载订单详情
     loadOrderDetail(){
            _order.getOrderDetail(this.state.orderNumber).then(res => {
                this.setState({
                    orderInfo : res
                });
            },errMsg => {
                _mm.errorTips(errMsg);
            });
        
     }
     onSendsGoods(e){
      if(window.confirm('是否确认该订单已经发货？')){
         _order.sendGoods(this.state.orderNumber).then((res) => {
            _mm.successTips('发货成功');
            this.loadOrderDetail();
        },(errMsg) => {
            _mm.errorTips(errMsg);
        });
      }
     }
     render(){
        let receiverInfo = this.state.orderInfo.shippingVo || {};
        let productList  = this.state.orderInfo.orderItemVoList || [];
        let tableHeads = [
          {name : '商品图片', width: '10%'},
          {name : '商品信息', width: '50%'},
          {name : '单价', width: '15%'},
          {name : '数量', width: '10%'},
          {name : '合计', width: '15%'}
        ];
        return (
           <div id="page-wrapper">
                <PageTitle title="订单详情"/>
                <div className="form-horizontal">
                    <div className="form-group">
                        <label className="col-sm-2 control-label">订单号</label>
                        <div className="col-sm-5">
                            <p className="form-control-static">{this.state.orderInfo.orderNo}</p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-sm-2 control-label">创建时间</label>
                        <div className="col-md-5">
                            <p className="form-control-static">{this.state.orderInfo.createTime}</p>
                        </div>
                    </div>
                     <div className="form-group">
                        <label className="col-sm-2 control-label">收件人</label>
                        <div className="col-md-5">
                            <p className="form-control-static">
                                {receiverInfo.receiverName}
                                {receiverInfo.receiverProvince}
                                {receiverInfo.receiverCity}
                                {receiverInfo.receiverAddress}
                                {receiverInfo.receiverMobile || receiverInfo.receiverPhone}
                            </p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-sm-2 control-label">订单状态</label>
                        <div className="col-md-5">
                            <p className="form-control-static">
                                {this.state.orderInfo.statusDesc}
                                {
                                    this.state.orderInfo.status === 20
                                    ? <button className="btn btn-default btn-sm btn-send-goods" onClick={(e) => {this.onSendsGoods(e)}}>立即发货</button>
                                    : null
                                }
                            </p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-sm-2 control-label">支付方式</label>
                        <div className="col-md-5">
                            <p className="form-control-static">{this.state.orderInfo.paymentTypeDesc}</p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-sm-2 control-label">订单金额</label>
                        <div className="col-md-5">
                            <p className="form-control-static">￥{this.state.orderInfo.payment}</p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-sm-2 control-label">商品列表</label>
                        <div className="col-md-10">
                           <TableList tableHeads={tableHeads}>
                                {
                                    productList.map((product, index) => {
                                        return (
                                            <tr key={index}>
                                                <td>
                                                    <img className="p-img"  alt={product.productName}
                                                        src={`${this.state.orderInfo.imageHost}${product.productImage}`}/>
                                                </td>
                                                <td>{product.productName}</td>
                                                <td>￥{product.currentUnitPrice}</td>
                                                <td>{product.quantity}</td>
                                                <td>￥{product.totalPrice}</td>
                                            </tr>
                                        );
                                    })
                                }
                            </TableList>
                        </div>
                    </div>
                </div>
           </div>
         );
     }
}


export default orderDetail;
